{% extends "mp/base.html" %}

{% block title %}充值中心{% endblock %}

{% block content %}

<div class="page__hd">
    <div  class="weui-media-box weui-media-box_appmsg" style="padding-left: 0px">
        <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title"> 充值中心 </h4>
            <p class="weui-media-box__desc"> 充值成功后，到账可能有一定延迟，请您耐心等待。</p>
        </div>
    </div>

{#    <div class="weui-media-box__desc"> 如遇微信无法充值 请使用支付宝充值 </div>#}
{#    <div class="weui-media-box__desc"> 如遇充值问题，请联系微信客服 <b> ... </b> </div>#}
</div>

<div class="page__bd">
    <div class="weui-cells__title"> <i class="fa fa-address-card"></i> 充值账号 </div>
    <div class="weui-cells weui-cells_form">{% csrf_token %}
        <div class="weui-cell weui-cell_vcode" style="height:45px">
            <div class="weui-cell__hd"><label class="weui-label">用户ID</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" id="uid" placeholder="请输入用户ID" v-model="input_uid" @keyup="onInputUid()">
            </div>
        </div>

        <div class="weui-cell" v-cloak v-show="show_user_avatar">
            <div class="weui-cell__bd"> <p>[[ user_nickname ]]</p> </div>
            <div class="weui-cell__ft"> <img class="right_large_avatar" :src="user_avatar"> </div>
        </div>
    </div>

    <div class="weui-btn-area" v-cloak v-if="show_activity_3">
{#        <a class="weui-btn weui-btn_block weui-btn_primary" v-on:click="selectPayMethod(298)">     ￥298 买 29800钻 </a>#}
{#        <a class="weui-btn weui-btn_block weui-btn_primary" v-on:click="selectPayMethod(128)">     ￥128 买 12800钻 </a>#}

        <a class="weui-btn weui-btn_block weui-btn_primary" v-on:click="selectPayMethod(3000)">     ￥3000 买 300000钻 </a>
        <a class="weui-btn weui-btn_block weui-btn_primary" v-on:click="selectPayMethod(1000)">     ￥1000 买 100000钻 </a>
        <a class="weui-btn weui-btn_block weui-btn_primary" v-on:click="selectPayMethod(68)">     ￥68 买 6800钻 </a>
        <a class="weui-btn weui-btn_block weui-btn_primary" v-on:click="selectPayMethod(30)">     ￥30 买 3000钻 </a>
        <a class="weui-btn weui-btn_block weui-btn_primary" v-on:click="selectPayMethod(6)">     ￥6 买 600钻 </a>
    </div>
</div>

<div class="page__ft">
    <div>
        <span class="bottom-logo"> HaiBao </span>
    </div>
</div>

<div id="dialogs">
        <!--BEGIN dialog2-->
        <div class="js_dialog" id="iosDialog2" style="display: none;">
            <div class="weui-mask"></div>
            <div id="js_dialog_2" class="weui-half-screen-dialog">
                <div class="weui-half-screen-dialog__hd">
                  <div class="weui-half-screen-dialog__hd__side">
                    <button style="display:none;" class="weui-icon-btn weui-icon-btn_goback">返回</button>
                    <button class="weui-icon-btn weui-icon-btn_close">关闭</button>
                  </div>
                  <div class="weui-half-screen-dialog__hd__main">
                    <strong class="weui-half-screen-dialog__title">支付方式</strong>
                    <span class="weui-half-screen-dialog__subtitle"> </span>
                  </div>
                </div>
                <div class="weui-half-screen-dialog__bd">
                  <p class="weui-half-screen-dialog__desc">
                    请选您想使用的择支付方式
                  </p>
                  <p class="weui-half-screen-dialog__tips">
{#                    选择支付宝支付时，需要点击右上角，在Safari浏览器中打开本页面。#}
                  </p>
                </div>
                <div class="weui-half-screen-dialog__ft">
{#                    <a v-on:click="payWithAli()" class="weui-btn weui-btn_default">支付宝</a>#}
                    <a v-on:click="payWithWechat()" class="weui-btn weui-btn_primary">微信</a>
                </div>
            </div>
        </div>
        <!--END dialog2-->
    </div>

{% endblock content %}


<!-- SCRIPT
  =====================================================================-->

{% block extra_js %}

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">
    $(function() {
        let $dialog2 = $('#js_dialog_2');
        let $iosDialog2 = $('#iosDialog2');

        $('#dialogs').on('click', '.weui-mask', function(){
            $(this).parents('.js_dialog').fadeOut(200);
            $dialog2.removeClass('weui-half-screen-dialog_show');
        });

        $('#showIOSDialog2').on('click', function(){
            $iosDialog2.fadeIn(200);
            $dialog2.addClass('weui-half-screen-dialog_show');
        });
    });
</script>

<script>

wx.config({
    debug: false,
    appId: "{{ config.appId }}", // 公众号的唯一标识
    timestamp: {{ config.timestamp }}, // 生成签名的时间戳
    nonceStr: "{{ config.nonceStr }}", // 生成签名的随机串
    signature: "{{ config.signature }}", // 签名
    jsApiList: ['chooseWXPay'] //必填， JS接口列表
});

wx.error(function (res) {
    console.log(res);
});

new Vue({
    el: '#app',
    delimiters:['[[', ']]'],

    data: {
        {#// 是否显示充值用户的头像信息#}
        show_user_avatar: false,
        {#// 是否显示活动3#}
        show_activity_3: true,

        {#// 输入的用户id#}
        input_uid: '',
        {#// 用户的头像#}
        user_avatar: '',
        {#// 用户的昵称#}
        user_nickname: '',
        {#// 用户的充值次数#}
        user_pay_count: 0,

        {#// 充值金额#}
        pay_amount: 30,
    },

    methods: {
        // 根据用户属性充值界面
        resetUi() {
            this.user_avatar = '';
            this.user_nickname = '';
            this.user_pay_count = 0;

            this.show_user_avatar = false;
            this.show_activity_3 = true;
        },

        selectPayMethod(rmb) {
            /*
            const uid = $('#uid').val();

            if (!uid || uid.length === 0) {
                show_toast("请输入用户ID!");
                return;
            }

            this.pay_amount = rmb;

            let $dialog2 = $('#js_dialog_2');
            let $iosDialog2 = $('#iosDialog2');
            $iosDialog2.fadeIn(200);
            $dialog2.addClass('weui-half-screen-dialog_show');
            */

            this.pay_amount = rmb;
            this.payWithWechat();
        },

        payWithWechat() {
            const uid = $('#uid').val();

            if (!uid || uid.length === 0) {
                show_toast("请输入用户ID!");
                return;
            }
            if (!/^\d+$/.test(uid)) {
                show_toast("无效的用户ID!");
                return;
            }

            const url = "{% url 'mp:api_get_prepay_info' %}";
            const rmb = this.pay_amount;
            pay_with_wechat(url, uid, rmb);
        },

        payWithAli() {
            window.location = "{% url 'mp:pay_with_ali' %}";
        },

        onInputUid() {
            let url = "{% url 'mp:api_user_info' %}";
            let data = {
                'uid': this.input_uid,
            };

            if (this.input_uid == '') {
                this.resetUi();
                return;
            }

            new my_ajax(url, data, '', '', (data, message) => {
                this.user_avatar = data['avatar'];
                this.user_nickname = data['nickname'];
                this.user_pay_count = data['pay_count'];
                this.show_user_avatar = true;
            }, (message) => {
                this.resetUi();
            });
        },
    },

    mounted() {
        this.show_user_avatar = false;
        this.show_activity_3 = true;
        this.user_avatar = '';
        this.user_nickname = '';
    },
});

</script>
{% endblock extra_js %}
